<template>
	<view class="mailing-address">
		<u-radio-group v-model="checked">
			<view class="list">
				<view
					v-for="item in list"
					:key="item.id"
					class="item"
				>
					<view class="top">
						<view class="flex-align">
							<text class="bold">{{ item.name }}</text>
							<text class="bold" style="margin-left: 46rpx; margin-right: 20rpx;">{{ item.phone }}</text>
							<u-tag
								v-if="item.tag"
								:text="item.tag"
								size="mini"
								color="#0642F2"
								bgColor="rgba(6, 66, 242, 0.2)"
								borderColor="rgba(0,0,0,0)"
							/>
						</view>
						
						<view style="margin-top: 28rpx; font-size: 28rpx;">
							<text v-if="item.id === checked" style="color: #FB8D10;">[默认地址]</text>
							<text style="color: #999999">{{ item.address }}</text>
						</view>
					</view>
					
					<u-line color="#F3F3F3"></u-line>
					
					<view class="bottom flex-between">
						<view :class="{ checked: item.id === checked }">
							<u-radio
								label="设为默认"
								:name="item.id"
								shape="circle"
							/>
						</view>
						
						<view class="flex-align">
							<u-icon name="edit-pen-fill" color="#bbb" size="42rpx" @click="edit(item)"></u-icon>
							<u-icon name="trash-fill" color="#bbb" size="42rpx" customStyle="margin-left: 40rpx;" @click="del(item)"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</u-radio-group>
		
		<view class="bottom-add-btn">
			<u-button text="+新增收货地址" shape="circle" @click="add" color="linear-gradient(0deg, rgb(47, 117, 250) 0%, rgb(82, 142, 255) 100%)"></u-button>
		</view>
		
		<ModalConfirm v-model="showModalConfirm" content="确认要删除这条地址吗?" @confirm="confirm"></ModalConfirm>
	</view>
</template>

<script>
import ModalConfirm from '../../components/modal-confirm/modal-confirm';
import { serialize } from '@/utils/util.js';
	
export default {
	components: {
		ModalConfirm
	},
	data() {
		return {
			showModalConfirm: false,
			checked: 1,
			list: [
				{
					id: 1,
					name: '孔燕德',
					phone: '138888888888',
					tag: '公司',
					address: '北京市东城区东长安街天安门广场北侧'
				},
				{
					id: 2,
					name: '孔燕德',
					phone: '138888888888',
					address: '北京市东城区东长安街天安门广场北侧'
				}
			]
		}
	},
	methods: {
		edit(item) {
			const obj = {
				...item,
				default: item.id === this.checked
			};
			uni.navigateTo({
				url: '/page_venues/pages/mailing-address/add/add' + serialize(obj)
			});
		},
		del(item) {
			this.showModalConfirm = true;
		},
		confirm() {
			
		},
		add() {
			uni.navigateTo({
				url: '/page_venues/pages/mailing-address/add/add'
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.mailing-address {
	min-height: 100vh;
	background-color: #f7f7f7;
	padding: 30rpx;
	padding-bottom: calc(150rpx + env(safe-area-inset-bottom));
	
	.list {
		width: 100%;
		
		.item {
			border-radius: 20rpx;
			background-color: #fff;
			box-shadow: 0px 6rpx 19rpx 1rpx rgba(0, 0, 0, 0.06);
			
			& + .item {
				margin-top: 25rpx;
			}
			
			.top {
				padding: 40rpx 30rpx;
			}
			
			.bottom {
				padding: 20rpx 30rpx;
				
				/deep/.u-radio {
					> text {
						color: #999 !important;
					}
				}
				
				/deep/.checked {
					.u-radio {
						> text {
							color: #2F75FA !important;
						}
					}
				}
			}
		}
	}
}
</style>
